import React from 'react'
import {Button, Col, Form, Input, Modal, Row} from 'antd'

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 4},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 16},
  },
}

class NewOrganizationModal extends React.Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.addOrganization(values)
      }
    })
  };

  render() {
    const {isNewModalOpen, closeModal, form} = this.props;
    const {getFieldDecorator} = form;

    return <div>
      <Modal
        title='添加组织'
        visible={isNewModalOpen}
        footer={null}
        onCancel={() => closeModal()}
      >
        <Form onSubmit={this.handleSubmit}>
          <Form.Item
            {...formItemLayout}
            label="组织名称"
          >
            {getFieldDecorator('title', {
              rules: [{
                required: true, message: '请输入名称',
              }],
            })(
              <Input/>
            )}
          </Form.Item>

          <Row type='flex' align='center'>
            <Col>
              <Button type="primary"
                      htmlType="submit">确定</Button>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
  }
}

const NewOrganizationModalForm = Form.create()(NewOrganizationModal);

export default NewOrganizationModalForm
